<template>
  <div>
    <div>
      <h2>用户入住订单</h2>
    </div>
    <!-- 表格渲染 -->
    <el-table
      border
      :fit="true"
      ref="tableData"
      max-height="750"
      style="width: 100%"
      :data="tableData"
    >
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="u_id" v-if="false"></el-table-column>
      <el-table-column prop="order_id" label="订单号"></el-table-column>
      <el-table-column prop="roomNumber" label="订房数量"></el-table-column>
      <el-table-column prop="Status" label="状态" :formatter="orderStatus"></el-table-column>

      <el-table-column prop="orderTime" label="订单时间" width="160"></el-table-column>
      <el-table-column prop="arrireDate" label="到达时间" width="160"></el-table-column>
      <el-table-column prop="leaveDate" label="离开时间" width="160"></el-table-column>
      <el-table-column prop="realMoney" label="实收（元）"></el-table-column>
      <el-table-column prop="orderMoney" label="定价（元）"></el-table-column>
      <el-table-column prop="userPhone" label="手机号" width="170"></el-table-column>
      <el-table-column prop="user_remark" label="用户备注"></el-table-column>
      <el-table-column prop="admin_remark" label="备注"></el-table-column>
      <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            size="medium"
            type="text"
            @click="orderComplete(scope.$index,scope.row)"
            :disabled="scope.row.checkOutVisible"
          >退房</el-button>
          <el-button size="medium" type="text" @click="cancelOrderRoom(scope.$index,scope.row)">安排退房</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="安排房间" :visible.sync="dialogVisible" width="70%" center>
      <div>
        <el-table
          border
          :fit="true"
          ref="tableData"
          max-height="750"
          style="width: 100%"
          :data="room_id_total"
        >
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="order_id" label="订单号"></el-table-column>
          <el-table-column prop="or_room_id" label="订单房间号" width="100"></el-table-column>
          <el-table-column prop="room_id" label="房间号"></el-table-column>

          <el-table-column prop="rt_id" label="房间类型" width="160" :formatter="rt_id"></el-table-column>
          <el-table-column prop="in_date" label="到达时间" width="160"></el-table-column>
          <el-table-column prop="out_date" label="离开时间" width="160"></el-table-column>
          <el-table-column prop="real_in_date" label="真正到达时间" width="160"></el-table-column>
          <el-table-column prop="real_out_date" label="真正离开时间" width="160"></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                size="medium"
                type="text"
                :disabled="scope.row.real_out_date!=null"
                @click="cancelOneOrderRoom(scope.$index,scope.row)"
              >退房</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div></div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      roomInfo: {
        //order_id order-rooms[or-room-id room-id]
        //#{userPhone},#{user_remark},#{roomNumber}

        order_id: ""
        //数组, #{rt_id},#{in_date},#{out_date}
      },
      dialogVisible: false,
      room_id_total: [],
      index: "",
      row: ""
    };
  },
  mounted() {
    this.getHome();
  },
  methods: {
    orderStatus(row) {
          console.log(row);
          if (row.orderStatus == 0) {
              row.Status = "未审核";
              return row.Status;
          } else if (row.orderStatus == 1) {
              row.Status = "审核通过";
              return row.Status;
          } else if (row.orderStatus == 2) {
              row.Status = "已入住";
              return row.Status;
          } else if (row.orderStatus == -1) {
              row.Status = "用户取消订单";
              return row.Status;
          } else if (row.orderStatus == -2) {
              row.Status = "拒绝";
              return row.Status;
          }
      },
    getHome() {
      this.$axios
        .get("/ssms/admin/order/getOrderByStatus?orderStatus=2", {
          headers: {
            "Content-Type": "application/json",
            responseType: "application/json"
          }
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.tableData = res.data.obj;
          }
        });
    },
    orderComplete(index, row) {
      this.roomInfo.order_id = row.order_id;
      var data = JSON.stringify(this.roomInfo);
      console.log(data);
      this.$axios
        .post("/ssms/admin/order/orderComplete", data, {
          headers: {
            "Content-Type": "application/json",
            responseType: "application/json"
          }
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.tableData = res.data.obj;
            alert("成功");
            this.getHome();
          }
        });
    },
    cancelOneOrderRoom(index, row) {
      let delete_or_room_id = row.or_room_id;
      let delete_room_id = row.room_id;
      let delete_rt_id = row.rt_id;
      let delete_out_date = row.out_date;
      console.log(delete_or_room_id);
      let data = JSON.stringify(delete_or_room_id);
      this.$axios
        .get(
          "/ssms/admin/order/cancelOrderRoom",
          {
            params: {
              or_room_id: delete_or_room_id,
              room_id: delete_room_id,
              rt_id: delete_rt_id,
              out_date: delete_out_date
            }
          },
          {
            headers: {
              "Content-Type": "application/json",
              responseType: "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            alert(res.data.msg);
            this.getHome();
          } else {
            alert(res.data.msg);
          }
        });
    },
    cancelOrderRoom(index, row) {
      this.dialogVisible = true;
      (this.index = index), (this.row = row);
      this.$axios({
        method: "POST",
        url: "/ssms/admin/order/findAllOrderRoom?order_id=" + row.order_id,
        headers: {
          "Content-Type": "application/json"
        },
        responseType: "application/json"
        // emailCode:this.formInline.emailCode
      })
        .then(response => {
          console.log("response.data");
          console.log(response.data);
          if (response.data.code === 0) {
            this.room_id_total = response.data.obj;
            console.log(room_id_total);
          }
        })
        .catch(err => {
          console.log(err);
          alert(response.data.obj);
        });
    },
    rt_id(row) {
      if (row.rt_id == 1) {
        row.type = "双人房";
        return row.type;
      } else if (row.rt_id == 2) {
        row.type = "单人房";
        return row.type;
      } else if (row.rt_id == 3) {
        row.type = "大床房";
        return row.type;
      }
    }
  }
};
</script>

<style>
</style>